<template>
  <div class="role-auth">
    <el-dialog
      v-bind="$attrs"
      :title="state.dialogTitle"
      v-model="state.modalVisible"
      :before-close="cancelDialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      class="role-dialog"
      draggable
    >
      <div class="role-auth-container" v-loading="treeLoading">
        <el-tree
          :default-expand-all="true"
          ref="roleAuthTree"
          expandNode="true"
          :props="{ label: 'remark', children: 'children' }"
          show-checkbox
          :data="treeData"
          highlight-current
          node-key="menu_id"
        >
          <template #default="{ data: { remark, menu_id } }">
            {{ `${remark}(${menu_id})` }}</template
          >
        </el-tree>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useSystemManageStore from "@store/modules/systemManage";
import { buildTreeData } from "@/utils/routerUtil";
import _ from "lodash";

const systemManageStore = useSystemManageStore();
const { proxy } = getCurrentInstance();

const roleAuthTree = ref(null);
const menuOrigin = ref([]);
const treeData = ref([]);
const treeLoading = ref(false);

const state = reactive({
  modalVisible: false,
  dialogTitle: "",
  editView: {},
});

const getDataView = async (data) => {
  treeLoading.value = true;
  const { Data, Total } = await systemManageStore.menuLoad(data);
  menuOrigin.vlaue = Data;
  treeData.value = buildTreeData(Data, "menu_id");
};

const setDefaultChecked = async (orginData) => {
  if (state.editView.popedom) {
    const init = state.editView.popedom.split(",");
    await roleAuthTree.value.setCheckedKeys(init); // 1.设置数据库保存的所有节点
    const checkedKeysLeaf = roleAuthTree.value.getCheckedKeys(true); // 2.getCheckedKeys方法获取leaf叶子节点
    const leafKeys = _.intersectionBy(init, checkedKeysLeaf, String); // 3.所有节点和叶子节点，取共有集合
    await roleAuthTree.value.setCheckedKeys(leafKeys); // 4.设置全部leaf叶子节点
  }
  treeLoading.value = false;
};

const submitDialog = async () => {
  const list = roleAuthTree.value
    .getCheckedKeys()
    .concat(roleAuthTree.value.getHalfCheckedKeys());
  if (!list.length) {
    proxy.$modal.msgError("未选择任何权限！");
    return;
  }
  await systemManageStore.sysusergroupUp({
    popedom: list.join(","),
    id: state.editView.id,
  });
  proxy.$modal.msgSuccess("修改成功！");
  state.modalVisible = false;
};
const cancelDialog = () => {
  state.modalVisible = false;
};

const openDialog = async (data = {}) => {
  state.modalVisible = true;
  if (Object.keys(data).length) await getDataView({});
  state.editView = data;
  state.dialogTitle = `权限分配【${data.title}】`;
  setDefaultChecked(menuOrigin.vlaue);
};

defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
